<template>
  <q-dialog v-model="visible">
    <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
      <q-card-section class="row items-center q-gutter-x-sm no-wrap overflow-auto" style="min-width: 20rem;">
        <template v-if="$q.screen.gt.xs">
          <div class="text-h6 text-bold text-center text-grey-7">选择导航点</div>
          <q-space/>
        </template>
        <q-select outlined dense style="min-width: 8rem" clearable
                  v-model="group" :options="groups" behavior="menu"
                  label="选择地图组"/>
        <q-select v-model="map" :options="options" label="选择地图"
                  @filter="filterFn" :use-input="!map" clearable
                  behavior="menu" outlined dense style="min-width: 8rem"
                  option-label="name"/>
      </q-card-section>
      <q-separator/>
      <q-slide-transition>
        <div v-if="mapPoses.length !== 0">
          <q-card-section
            style="max-height: calc(100vh - 10rem); min-height: 10rem; min-width: 15rem; overflow: auto"
            class="row items-center justify-center">
            <q-card v-for="mapPose in mapPoses.filter(item=>poseType===''?mapPoses:item.type===poseType)" v-bind:key="mapPose.id"
                    class="q-ma-sm"
                    @click="shape = mapPose.id"
                    style="min-width: 15rem">
              <q-card-section class="row items-center">
                <div class="text-h6 text-bold text-black no-wrap overflow-hidden"
                     style="width: calc(100%); height: 2rem">
                  {{ mapPose.name }}
                  <q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="mapPose.id" class="float-right"/>
                </div>
              </q-card-section>
              <q-separator />
              <q-list>
                <q-item dense v-for="item in mapPoseItems" v-bind:key="item.key" clickable v-ripple>
                  <q-item-section>{{ item.title }}</q-item-section>
                  <q-item-section side>{{ mapPose[item.key]}}</q-item-section>
                </q-item>
                <q-item dense clickable v-ripple>
                  <q-item-section>连接点数</q-item-section>
                  <q-item-section side>{{ mapPose.connectedPose.length }}</q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </q-card-section>
          <q-card-section class="text-center">
            <q-btn label="绑定" class="text-center" style="min-width: 16rem" color="primary" v-if="shape" @click="select"/>
          </q-card-section>
        </div>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { api } from 'boot/axios'
import { useAPIStore } from 'stores/api'
import { useQuasar } from 'quasar'

const mapPoseItems = [
  { title: '点位类型', key: 'type' },
  { title: '是否可转向', key: 'turnable' },
  { title: '优先度', key: 'priority' }
]
const visible = ref(false)

const currentMapPose = ref({})
const map = ref()
const mapList = ref([])
const groups = ref([]) // 地图分组的选项
const group = ref(null) // 地图分组
const mapOptions = computed(() => (group.value === null ? mapList.value : mapList.value.filter(item => item.group === group.value)))
const options = ref([])
const shape = ref('')
const toolId = ref('')

const mapPoses = ref([])
const $q = useQuasar()
defineExpose({ show })
defineProps({
  poseType: { type: String, default: '' }
})
const emit = defineEmits(['update'])

onMounted(() => {
  getMaps()
  getMapPoseByID()
})
function show (data) {
  if (data.workPoseId) {
    shape.value = data.workPoseId
    getMapPoseByID(data.workPoseId)
  } else {
    shape.value = ''
  }
  toolId.value = data.id
  visible.value = true
}
function getMapPoseByID (id) {
  api.get(useAPIStore().mapUrl + 'mapPose/id/' + id).then(rs => {
    currentMapPose.value = rs.data
    api.get(useAPIStore().mapUrl + 'map/id/' + currentMapPose.value.mapID).then(rs => {
      map.value = rs.data
    })
  })
}
watch(map, value => {
  if (value) {
    api.get(useAPIStore().mapUrl + 'mapPose/mapID/' + value.id).then(rs => {
      mapPoses.value = rs.data
    })
  } else {
    mapPoses.value = []
  }
})
function getMaps () {
  api.get(useAPIStore().mapUrl + 'map/all/simple').then(rs => {
    mapList.value = rs.data
  })
  api.get(useAPIStore().mapUrl + 'map/groups').then(rs => {
    groups.value = rs.data
  })
}

// eslint-disable-next-line no-unused-vars
function select () {
  const tools = {
    id: toolId.value,
    workPoseId: shape.value
  }
  api.put(useAPIStore().taskUrl + 'machine/data/update', tools).then(rs => {
    if (rs.data.code === 200) {
      $q.notify({
        message: '点位绑定成功',
        type: 'positive'
      })
      emit('update')
      visible.value = false
    } else {
      $q.notify({ message: rs.data.message, type: 'negative' })
    }
  })
}
function filterFn (val, update) {
  if (val === '') {
    update(() => {
      options.value = mapOptions.value
    })
    return
  }

  update(() => {
    const needle = val.toLowerCase()
    options.value = mapOptions.value.filter(v => v.name.toLowerCase().indexOf(needle) > -1)
  })
}

</script>

<style scoped>

</style>
